Menyimpan Data Pada Cookies Dengan Javascript

Berikut ini saya akan share tutorial mengenai cara menyimpan data cookies dengan menggunakan javascript. Namum sebelum itu kita harus tau terlebih dahulu apa itu cookies.

Menurut wikipedia “Kuki HTTP, atau kuki peramban, adalah bagian kecil dari data yang dikirim dari sebuah situs web dan disimpan dalam komputer pengguna oleh peramban web ketika pengguna tersebut sedang membuka halaman web”

Dari pengertian wikipedia diatas saya akan jelas kan lagi. Cookies atau dikenal dalam bahasa indonesia dengan kuki adalah bagian kecil dalam bentuk teks yang di kirimkan dari situs web kemudian di simpan dalam komputer melalui web browser seperti chrome atau mozilla atau sejenisnya.

Mungkin sebelumnya anda pernah mendengar teks seperti ini “Website ini menyimpan data yang diperlukan melalui cookies untuk performa lebih baik”

Nah, dengan kata lain kuki ini berasal dari website atau aplikasi yang kita kunjungi melalui browser. Misal kita mengakses situs A. Situs A menyimpan data login terakhir seperti username, dan info user lainnya seperti nama, dll. Gunanya agar ketika user tersebut mengakses kembali halaman nya, maka website A sudah memiliki data dari komputer pengguna sebelum nya. Karena sebelum nya pengguna website tersebut pernah mengakses situsnya. Dengan begitu halaman yang membutuhkan input username biasanya langsung terisi otomatis ketika kita mengunjungi web yang pernah kita kunjungi sebelumnya.

Kurang lebih seperti itu penjelasan mengenai apa itu cookies.

Selanjutnya kita akan masuk kepada cara menyimpan data website pada cookies dengan menggunakan javascript. Kita yang dalam hal ini merupakan pengembang web atau pemilik sistem informasi online, terkadang membutuhkan data user yang otomatis tersimpan di browser.

Membuat Cookie

Adapun kode untuk membuat cookie adalah sebagai berikut :

document.cookie = "name=Juragan Sistem";

Kode di atas adalah untuk membuat cookie nama dengan Juragan Sistem. Secara default cookie akan di hapus secara otomatis melalui browser ketika browser di close. Untum mengatasinya kita dapat menambahkan expiry atau masa berlaku cookie berdasarkan waktu dengan kode berikut :

document.cookie = "name=Juragan Sistem; expires=Wed, 13 Feb 2021 12:00:00 UTC";

Maka cookie akan expired sesuai tanggal.
Kuki berlaku pada halaman dimana kode cookie di terapkan. Namun jika kita ingin nenerapkan nya ke seluruh path website. Maka gunakan kode berikut : 

document.cookie = "name=Juragan Sistem; expires=Wed, 13 Feb 2021 12:00:00 UTC; path=/";

Membuat Fungsi Cookie

Nah, jika sudah tau dasar cara membuat cookie dengan javascript selanjutnya kita akan membuat fungsi nya agar lebih mudah di panggil ketika dibutuhkan.

Simak kode berikut ini :

Kita akan membuat fungsi bernama setCookie() yang mana kuki ini akan menolong kita membuat kuki dengan value spesifik menggunakan javascript

name – cookie nya adalah nama.
value – nilai dari cookie nama.
exp_days – waktu expired cookie dalam hari.

function setCookie(name,value,exp_days) {
    var d = new Date();
    d.setTime(d.getTime() + (exp_days*24*60*60*1000));
    var expires = "expires=" + d.toGMTString();
    document.cookie = name + "=" + value + ";" + expires + ";path=/";
}

Tanda “/” menandakan bahwa cookie akan berlaku pada seluruh path di domain website.

Contoh Kode:

Kode di bawah ini adalah cookie dengan kuki bernama username dan nilai/value JuraganSistem berlaku selama 5 hari. Maka kodenya adalah sebagai berikut : 

setCookie("username", "JuraganSistem", 5);

Mendapatkan Nilai Cookie

Berikut adalah fungsi yang digunakan untuk mendapatkan nilai cookie. Misal kita ingin mendapatkan valu dari name cookie. Berikut adalah contoh fungsi dan kode pemanggil fungsinya :

function getCookie(name) {
    var cname = name + "=";
    var decodedCookie = decodeURIComponent(document.cookie);
    var ca = decodedCookie.split(';');
    for(var i = 0; i < ca.length; i++){
        var c = ca[i];
        while(c.charAt(0) == ' '){
            c = c.substring(1);
        }
        if(c.indexOf(cname) == 0){
            return c.substring(cname.length, c.length);
        }
    }
    return "";
}

Name adalah nama cookie yang ingin kita panggil. Misal dalam hal ini kita ingin mengambil nilai cookie username Contoh kode nya adalah :

var user = getCookie("username");

Menghapus Cookie

Berikut adalah kode fungsi dan kode pemanggil fungsi untuk menghapus cookie dengan javascript :

function deleteCookie(name) {
    var d = new Date();
    d.setTime(d.getTime() - (60*60*1000));
    var expires = "expires=" + d.toGMTString();
    document.cookie = name + "=;" + expires + ";path=/";
}

Misal kita ingin menghapus cookie username. Kodenya adalah sebagai berikut : 

deleteCookie("username")

Baik. Demikianlah tutorial cara menyimpan cookie dengan javascript beserta cara untuk memanggil nilai cookie dan menghapusnya. Semoga bermanfaat untuk project yang anda kerjakan. Terimakasih. Semoga bermanfaat.

Pemesanan sistem informasi hub no berikut :

Related posts